
<div class="border shadow-sm overflow-hidden bg-stone-800 border-stone-950 shadow-stone-950/25 mx-auto w-full rounded-full p-6">
  <div class="flex w-full">
    <div class="group aria-disabled:select-none aria-disabled:pointer-events-none w-full">
      <div class="relative">
        <div class="absolute bg-gray-300 group-data-[completed=true]:bg-white"></div>
        <span class="relative z-10 grid place-items-center rounded-full text-surface-foreground group-data-[active=true]:text-primary-foreground group-data-[completed=true]:text-primary-foreground h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white"></span>
      </div>
    </div>
    <div class="group aria-disabled:select-none aria-disabled:pointer-events-none w-full">
      <div class="relative">
        <div class="absolute bg-gray-300 group-data-[completed=true]:bg-white"></div>
        <span class="relative z-10 grid place-items-center rounded-full text-surface-foreground group-data-[active=true]:text-primary-foreground group-data-[completed=true]:text-primary-foreground h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white"></span>
      </div>
    </div>
    <div class="group aria-disabled:select-none aria-disabled:pointer-events-none w-full">
      <div class="relative">
        <div class="absolute bg-gray-300 group-data-[completed=true]:bg-white"></div>
        <span class="relative z-10 grid place-items-center rounded-full text-surface-foreground group-data-[active=true]:text-primary-foreground group-data-[completed=true]:text-primary-foreground h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white"></span>
      </div>
    </div>
    <div class="group aria-disabled:select-none aria-disabled:pointer-events-none">
      <div class="relative">
        <span class="relative z-10 grid place-items-center rounded-full text-surface-foreground group-data-[active=true]:text-primary-foreground group-data-[completed=true]:text-primary-foreground h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white"></span>
      </div>
    </div>
  </div>
</div>
